<style>
    .md-editor {
        padding: 0 10px 10px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

    .md-editor textarea {
        border: none;
        resize: vertical;
        outline: none;
        padding: 0;
    }

    .md-editor textarea {
        width: 100%;
    }

    .md-editor .md-preview {
        overflow: auto;
    }

    .md-editor .md-preview img {
        max-width: 100%;
    }

    .md-editor .md-toolbar {
        border-bottom: 1px solid #ddd;
        overflow-x: auto;
        margin: 0 -10px 10px -10px;

    }

    .md-toolbar .button {
        line-height: 32px;
        width: 32px;
        text-align: center;
        cursor: pointer;
    }

    .md-help {
        overflow-x: auto;
    }

    .md-help table {
        border-spacing: 0;
        border-collapse: collapse;
        min-width: 100%;
    }

    .md-help table th, .md-help table td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .md-help table th {
        min-width: 80px;
    }
</style>
<div class="md-editor" v-style="width:width">
    <div class="md-toolbar">
        <span class="button {{icon}}" v-repeat="buttons" title="{{title}}" v-on="click:action(type)"></span>

        <span class="button fa fa-cloud-upload" v-on="click:toggleMode('upload')" v-if="upload.server"></span>
        <span class="button fa fa-eye" v-on="click:toggleMode('preview')"></span>
        <span class="button fa fa-question-circle" v-on="click:toggleMode('help')"></span>
    </div>
    <textarea v-model="text" v-el="textarea" v-show="mode=='edit'" v-style="height:height"
              v-attr="placeholder:placeholder"></textarea>

    <div class="md-preview" v-show="mode=='preview'" v-style="min-height:height">{{{previewHtml}}}</div>
    <div class="md-help" v-show="mode=='help'">
        <h1>markdown语法说明</h1>
        <table>
            <tbody>
            <tr>
                <th><i class="fa fa-image"></i>&nbsp;图片</th>
                <td colspan="2">![描述](图片地址)</td>
            </tr>
            <tr>
                <th><i class="fa fa-link"></i>&nbsp;链接</th>
                <td colspan="2">[描述](链接地址)</td>
            </tr>
            <tr>
                <th><i class="fa fa-bold" style="margin-right: 0"></i>/<i class="fa fa-italic"></i>强调</th>
                <td colspan="2">*斜体* 和 **粗体**</td>
            </tr>
            <tr>
                <th><i class="fa fa-header"></i>&nbsp;标题</th>
                <td colspan="2"># 一级标题 <br> ## 二级标题 <br>...<br> ##### 五级标题</td>
            </tr>
            <tr>
                <th><i class="fa fa-quote-left"></i>&nbsp;引用</th>
                <td colspan="2">&gt; 一级引用 <br> &gt;&gt; 二级引用</td>
            </tr>
            <tr>
                <th><i class="fa fa-list-ol"></i>&nbsp;列表</th>
                <td>
                    1. 有序列表1 <br>
                    2. 有序列表2 <br>
                    3. 有序列表3
                </td>
                <td>
                    - 无序列表1 <br>
                    - 无序列表2 <br>
                    - 无序列表3
                </td>
            </tr>
            <tr>
                <th><i class="fa fa-code"></i>&nbsp;代码</th>
                <td colspan="2">`var a = 1;`</td>
            </tr>
            <tr>
                <th><i class="fa fa-table"></i>&nbsp;表格</th>
                <td colspan="2">
                    <pre>First Header | Second Header | Third Header
:----------- | :-----------: | -----------:
 Left        |     Center    |       Right</pre>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="md-upload" v-if="upload.server" v-show="mode=='upload'" v-style="min-height:height">
        <uploader server="{{upload.server}}" max="{{upload.max||500*1024}}" form-data="{{upload.formData}}"/>
    </div>
</div>